<template name="caipiaoList">
	<!-- 合买大厅列表 -->
	<view class="caipiaoList">
		<view class="list-item" v-for="(item,index) in list" :key="index" @click="fnToCaseDetail()">
			<view class="item">
				<view class="top flex-bc">
					<view class="t-left flex-bc">
						<image src="/static/index/basketball.png"></image>
						<view class="item-info">
							<view class="name flex-c">
								<text class="nickname ellipsis">喜洋洋喜洋洋</text>
								<view class="red flex-c"><text>7连红</text></view>
								<view class="selected flex-c"><text>连中￥200.00</text></view>
							</view>
							<view class="time">
								<text>竞彩足球</text>
								<text class="stop">截止：</text>
								<text class="stop_time">09:58:50</text>
							</view>
						</view>
					</view>
					<view class="t-right flex-col-ac">
						<view class="rate">
							<text>10</text>
							<text>中</text>
							<text>9</text>
						</view>
						<text class="type-status">命中稳</text>
					</view>
				</view>
				<view class="mid">
					<text>一马平川稳中求胜~</text>
				</view>
				<view class="bot flex-c">
					<view class="b-left flex-ac">
						<view class="flex-c self-buy buy">
							<text class="number">20000</text>
							<text>自购金额(元)</text>
						</view>
						<view class="flex-c follow-num buy">
							<text class="number">1</text>
							<text>跟单人数</text>
						</view>
						<view class="flex-c follow-money buy">
							<text class="number">20000</text>
							<text>跟单金额(元)</text>
						</view>
					</view>
					<view class="b-right flex-c">
						<text>￥4</text>
						<text>单份</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "caipiaoList",
		props:['type'],
		data() {
			return {
				list: [1, 2, 3, 4, 5, 6, 7, 8]
			};
		},
		methods:{
			fnToCaseDetail(){
				var url = '/pages/case-detail/case-detail'
				if(this.type){
					url = '/pages/superDetail/superDetail'
				}
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	.list-item {
		padding: 30rpx;
		background: #fff;
		margin-bottom: 20rpx;

		.item {
			width: 100%;
			font-size: 28rpx;

			.top {
				.t-left {
					image {
						width: 80rpx;
						height: 80rpx;
						margin-right: 10rpx;
						display: block;
					}
					.item-info{
						.name{
							.nickname{
								max-width: 136rpx;
							}
							.red{
								color: #F22F29;
								background: rgba(242, 47, 41, 0.2);
								border-radius: 20rpx;
								font-size: 22rpx;
								margin-left: 16rpx;
								padding: 4rpx 12rpx;
							}
							.selected{
								color: #5670FE;
								background: rgba(86, 112, 254, 0.1);
								border-radius: 20rpx;
								font-size: 22rpx;
								margin-left: 16rpx;
								padding: 4rpx 12rpx;
							}
						}
						.time{
							margin-top: 6rpx;
							font-size: 24rpx;
							color: #999;
							.stop{
								margin-left: 20rpx;
							}
							.stop_time{
								color: #333;
							}
						}
					}
				}
				.t-right{
					color: #F22F29;
					font-size: 30rpx;
					.type-status{
						font-size: 22rpx;
					}
				}
			}

			.mid {
				margin: 20rpx 0;
				font-size: 30rpx;
			}

			.bot {
				width: 100%;
				height: 100rpx;

				.b-left {
					padding: 0 20rpx;
					flex: 1;
					border-radius: 10rpx 0 0 10rpx;
					background: #EDF4F9;
					height: 100%;
					font-size: 20rpx;
					color: #999;
					.buy{
						flex-direction: column;
						flex: 1;
						.number{
							font-size: 26rpx;
							color: #333;
							font-weight: bold;
						}
					}
				}

				.b-right {
					color: #fff;
					width: 20%;
					background: #F22F29;
					border-radius: 0 10rpx 10rpx 0;
					height: 100%;
					font-size: 24rpx;
					flex-direction: column;
				}
			}
		}
	}
</style>
